//接口
$(function () {
    //穿戴
    diaoPhp(2, 1, $('.con6 .con6_bottom'));
    //耳机音箱
    diaoPhp(3, 1, $('.con8 .con6_bottom'));
    //手机
    diaoPhp(1, 1, $('.con10 .con6_bottom'));
    //平板
    diaoPhp(6, 1, $('.con11 .con6_bottom'));
    //智慧屏
    diaoPhp(4, 1, $('.con12 .con6_bottom'));
    //笔记本显示器
    diaoPhp(5, 1, $('.con13 .con6_bottom'));
    //智能路由
    diaoPhp(7, 1, $('.con14 .con6_bottom'));
    //通用配件
    diaoPhp(8, 1, $('.con15 .con6_bottom'));
    //生态精品
    diaoPhp(9, 1, $('.con16 .con6_bottom'));
    //美食酒饮
    diaoPhp(11, 1, $('.con17 .con6_bottom'));
    //精选配件
    diaoPhp(10, 1, $('.con18 .con6_bottom'));

    if (isLogin()) {
        let cook = getCookie('username');
        $('.logined').show().find('a').html(cook);
        $('.logg').hide();
        $('.regii').hide();
    }

})

function diaoPhp(id, cou, ele) {
    //调接口，渲染到首页
    //id 商品类型id
    //cou读取几条数据
    //ele要渲染的位置（哪个元素内部的最后面开始添加）
    let htmlStr = '';
    $.get('php/getGoodsListNew.php?typeId=' + id + '&count=' + cou, function (reg) {
        let js_reg = JSON.parse(reg);
        js_reg.forEach(ele => {
            htmlStr += `
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li> 
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>
            <li>
                <a href="">
                    <p class="p1p4">新品上市</p>
                    <img src="${ele.goodsImg}" alt="">
                    <p class="p1p1">${ele.goodsName}</p>
                    <p class="p1p2">享3期免息</p>
                    <p class="p1p3">¥${ele.goodsPrice}</p>
                </a>
            </li>        
            `
        })
        ele.append(htmlStr);
    })
}

//登录后的首页，点击用户中心的退出登录，清除ookie
$('.user_center .user_4').on('click', function () {
    deleCookie('username');
    $(window).prop('location', 'index.html');
})


//最顶部点击×删除图片广告功能
$('.top_img>p').on('click', function () {
    $(this).parent().remove();
})

//导航栏 点击登录注册跳转到对应的页面
locat($('.right_1 .logg'), 'login.html');
locat($('.right_1 .regii'), 'regist.html');

//轮播下面的登录注册
locat($('.con1 .login2'), 'login.html');
locat($('.con1 .regist2'), 'regist.html');

//轮播图功能
var index = 0;  //记录当前轮播的图片的下标
$('.screen>.dian>li').on('mouseover', function () {
    //滑过小点轮播图片
    index = $(this).index();  //更新index
    $(this).addClass('changecolor').siblings('li').removeClass('changecolor');
    $('.screen>.uu1').animate({
        left: -1349 * index,
    })
})

//点击右箭头轮播
$('.screen .right').on('click', function () {
    index++;
    if (index > $('.screen>.uu1>li').length - 1) {
        //轮播到最后一张图时，下一次直接到第一张图
        index = 0;
    }
    $('.uu1').animate({
        left: -1349 * index,
    })
    $('.screen>.dian>li').eq(index).addClass('changecolor').siblings('li').removeClass('changecolor');
})

//点击左箭头轮播
$('.screen .left').on('click', function () {
    index--;
    if (index < 0) {
        //轮播到第一张图时，下一次直接到最后一张图
        index = $('.screen>.uu1>li').length - 1;
    }
    $('.uu1').animate({
        left: -1349 * index,
    })
    $('.screen>.dian>li').eq(index).addClass('changecolor').siblings('li').removeClass('changecolor');
})

var timer = null;
autoLun();
//自动轮播  
function autoLun() {
    clearInterval(timer);
    timer = setInterval(function () {
        index++;
        if (index > $('.screen>.uu1>li').length - 1) {
            //轮播到最后一张图时，下一次直接到第一张图
            index = 0;
        }
        $('.uu1').animate({
            left: -1349 * index,
        });
        $('.screen>.dian>li').eq(index).addClass('changecolor').siblings('li').removeClass('changecolor');
    }, 3000);
}

$('.screen').hover(function () {
    //鼠标移入screen区域，清除定时器
    clearInterval(timer);
}, function () {
    //鼠标移出screen区域，重新启动定时器
    autoLun();
})

//选项卡
$('.banner>.uu2>li').hover(function () {
    $(this).css('background-color', 'white');
    $('.banner>.uu2').css('border-radius', '7px 0 0 7px');
    $('.banner>.uu3').eq($(this).index()).show();
}, function () {
    $(this).css('background-color', '#f5ebe3');
    $('.banner>.uu2').css('border-radius', '7px');
    $('.banner>.uu3').eq($(this).index()).hide();
    // $('.banner>.uu3 li').hover(function(){
    //     $(this).css('background-color','green')
    // },function(){
    //     $('.banner>.uu3').hide();
    // })
})



// $('.banner>.uu2>li').find('a').mouseover(function(){
//     $(this).addClass('getcolor').siblings('a').removeClass('getcolor');
// })


// 内容区4轮播图调函数
let ri_jian1 = $('.con4 .ri1');
let le_jian1 = $('.con4 .le1');
let ul1 = $('.con4>.ddd>ul');
let div1 = $('.con4 .ddd');
jingLun(ri_jian1, le_jian1, ul1, div1)

// 内容区7轮播图调函数
let ri_jian2 = $('.con7 .ri1');
let le_jian2 = $('.con7 .le1');
let ul2 = $('.con7>.ddd>ul');
let div2 = $('.con7 .ddd');
jingLun(ri_jian2, le_jian2, ul2, div2)

// 内容区9轮播图调函数
let ri_jian3 = $('.con9 .ri1');
let le_jian3 = $('.con9 .le1');
let ul3 = $('.con9>.ddd>ul');
let div3 = $('.con9 .ddd');
jingLun(ri_jian3, le_jian3, ul3, div3)

function jingLun(ele1, ele2, ul_ele, div_ele) {
    var index = 0;
    //参数1：ele1 右箭头 参数2： ele2 左箭头 
    //参数3：ul_ele ul元素  :参数4：div_ele div元素
    ele1.on('click', function () {
        index++;
        if (index >= ul_ele.length - 1) {
            // $(this).off();//解绑事件
            index = ul_ele.length - 1;
        }
        div_ele.animate({
            'left': -1200 * index + 'px',
        }, 300)
    })

    ele2.on('click', function () {
        index--;
        if (index <= 0) {
            // $(this).off();//解绑事件
            index = 0;
        }
        div_ele.animate({
            'left': -1200 * index + 'px',
        }, 300)
    })
}

var index2 = 0;
//内容区5 轮播
$('.con5>.dian2>li').on('mouseover', function () {
    index2 = $(this).index();
    $(this).addClass('li_bg').siblings('li').removeClass('li_bg');
    $('.con5>ul>li').eq($(this).index()).fadeIn().siblings('li').fadeOut();
})

var timer2 = null;
lunBo2();
function lunBo2() {
    timer2 = setInterval(function () {
        index2++;
        if (index2 > $('.con5>ul>li').length - 1) {
            index2 = 0
        }
        $('.con5>ul>li').eq(index2).fadeIn().siblings('li').fadeOut();
        $('.con5>.dian2>li').eq(index2).addClass('li_bg').siblings('li').removeClass('li_bg');
    }, 1800)
}

//鼠标移入图片区域，停止自动轮播,反之继续轮播
$('.con5>ul').mouseover(function () {
    clearInterval(timer2);
})
$('.con5>ul').mouseout(function () {
    lunBo2();
})

var index3 = 0;
//底部轮播  右箭头
$('.ft_jian>.rrrt').on('click', function () {
    index3++;
    if (index3 >= 1) {
        //大于1时，让它点不动
        index3 = 1;
        $(this).css('color', 'gray');
    } else {
        $(this).css('color', 'black');
    }

    $('.outer_div').animate({
        left: -100 * index3,
    })
})
//左箭头
$('.ft_jian>.llle').on('click', function () {
    index3--;
    if (index3 <= 0) {
        //小于0时，让它点不动
        index3 = 0;
        $(this).css('color', 'gray');
    } else {
        $(this).css('color', 'black');
    }

    $('.outer_div').animate({
        left: -100 * index3,
    })
})

let y;
// 返回顶部板块
window.onscroll = function () {
    //页面滚动时触发
    y = $(window).scrollTop();
    if (y >= 1500) {
        $('.toptop').show();
    } else {
        $('.toptop').hide();
    }

    if (y >= 3330) {
        $('.totop .toul').show();
    } else {
        // console.log(12345);
        $('.totop .toul').hide();
    }
}

//点击返回顶部，即返回顶部
$('.toptop').on('click', function () {
    $(window).scrollTop(0);
    window.onscroll
})




